<template>
	<view>
		<view class="status_bar" />
		<view class="IndexnabBar">
			<uni-search-bar @confirm="" @input="" :radius="20" clearColor="#3d6bda" />
		</view>
		<view class="tabNav">
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'cur':''" v-for="(item,index) in navBar" :key="index" @tap="tabSelect"
				 :data-id="index" :data-urlid="item.url">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<view class="banner">
			<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			 duration="500" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
				<swiper-item v-for="(item,index) in banner" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image :src="item.imgs" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				navBar: [],
				banner: [],
				cardCur: 0
			}
		},
		onLoad() {
			this.getNavbar()
		},
		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			async getNavbar() {
				let res = await this.$api.getNavbar({});
				this.errcode = res.errCode;
				this.navBar = res.data.allData
				this.getNavData(res.data.allData[0].url);
			},
			getNavData(fid) {
				this.$api.getNavData({
					fid: fid
				}).then(res => {
					this.banner = res.data.banner
				});
			}
		}
	}
</script>
<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.IndexnabBar {
		padding: 5rpx 20rpx;
	}

	.cu-item {
		color: #8a8a8a;
		line-height: 50rpx;
		height: 60rpx;
	}

	.card-swiper uni-swiper-item {
		padding-top: 10rpx;
	}

	.nav .cu-item.cur {
		border: none !important;
		font-weight: 600;
		font-size: 34rpx;
		color: #0081ff;
	}
</style>
